<template>
  <div class="info-msg">
      <transition
      @before-enter="tobeforn"
      @enter="toenter"
      @after-enter="toafter">
        <div class="car-ball" v-if="ballflag" ref="ball"></div>
      </transition>
      
      <!-- 商品轮播图区域 -->
    <div class="mui-card">
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <publicSwipe :swipeImg="swipeImg" :styleflag="addstyle"></publicSwipe>
        </div>
    </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card infobanner">
        <div class="mui-card-header">{{infos.title}}</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner mui-clear">
                <p>
                    <span>市场价：{{infos.market_price}}</span>
                    <span>销售价：{{infos.sell_price}}</span>
                </p>
                <goodsaddnum @getchildnum='getbuynum' :max="infos.stock_quantity"></goodsaddnum>
                <div class="shopping">
                    <mt-button type="primary" size="small" class="buying">立即购买</mt-button>
                    <mt-button type="danger" size="small" class="addcart" @click="balltransform">加入购物车</mt-button>
                </div>
                
            </div>
        </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
        <div class="mui-card-header">商品参数</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p>
                    商品货号：{{infos.goods_no}}
                </p>
                <p>
                    库存情况：{{infos.stock_quantity}}
                </p>
                <p>
                    上架时间：{{infos.add_time | comment()}}
                </p>
            </div>
        </div>
        <div class="mui-card-footer">
            <mt-button type="primary" size="large" class="" plain @click="jumpinfos">图文详情</mt-button>
            <mt-button type="danger" size="large" class="" plain @click="jumpcomment">商品评论</mt-button>
        </div>
    </div>
  </div>
</template>
<script>
import goodsaddnum from "../comment/goodsaddnum";
import publicSwipe from '../comment/publicSwipe';
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      id: this.$route.params.id,
      infos: {},
      ballflag: false,
      buynum:1,
      swipeImg:[],
      addstyle:true
    };
  },
  created() {
    this.getinfos();
    this.getSwipe()
  },
  mounted() {},
  methods: {
    //获取当前商品信息
    getinfos() {
      this.$axios.get("api/goods/getinfo/" + this.id).then(results => {
        if (results.data.status == 0) {
          this.infos = results.data.message[0];
         
        }
      });
    },
    //获取轮播图图片
    getSwipe() {
      this.$axios.get("api/getthumimages/" + this.id).then(results => {
        if (results.data.status == 0) {
          this.swipeImg=results.data.message
         this.swipeImg.forEach(item=>{
             item.img=item.src
         })
        }
      });
    },
    //使用vuex实现组件之间的传值
    balltransform() {
      this.ballflag = !this.ballflag;
      var infos = {id:this.infos.id,count:this.buynum,price:this.infos.sell_price,seleted:true};
      this.$store.commit('getCarcount',infos)
      Toast('添加购物成功！')
    },
    //购物车小球动画
    tobeforn(el) {
      el.style.transform = `translate(0,0)`;
    },
    toenter(el, done) {
      //getBoundingClientRect获取目标元素在页面上的位置
        var carballx = document.getElementById('carballs').getBoundingClientRect().left
        var carbally = document.getElementById('carballs').getBoundingClientRect().top
       var ballx = this.$refs.ball.getBoundingClientRect().left 
       var bally = this.$refs.ball.getBoundingClientRect().top 
       var X = carballx- ballx;
       var Y = carbally-bally  ;
       console.log(X,Y)
      el.offsetWidth;
      el.style.transform = `translate(${X}px,${Y}px)`;
      el.style.transition = "all 1s";
      done();
    },
    toafter(el) {
      this.ballflag = false;
    },
    //获取子组件传输的商品件数
    getbuynum(data){
        this.buynum=data
    },
    //图文详情跳转
    jumpinfos(){
      this.$router.push({name:'goodspicinfos',params:{id:this.id}})
    },
    //评论区跳转
    jumpcomment(){
      this.$router.push({name:'goodscomment',params:{id:this.id}})
    }
  },
  components: {
    goodsaddnum,
    publicSwipe
  }
};
</script>
<style lang="scss" scoped>
.infobanner {
  .mui-card-content-inner {
    color: #8f8f94;
    p {
      span:nth-child(1) {
        text-decoration: line-through;
        margin-right: 20px;
        font-size: 12px;
      }
      span:nth-child(2) {
        color: red;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .shopping {
      margin-top: 15px;
    }
  }
}
.mui-card-footer {
  display: block;
  button {
    margin-top: 20px;
  }
}
.info-msg {
  position: relative;
}
.car-ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
    left: 152px;
    top: 359px;
  z-index: 9999;
}
</style>
